<template>
  <div>
    <el-button @click="saveInstorage()">提交</el-button>
    <h1 style="text-align:center">材料出库</h1>
    <el-form :inline="true" v-model="outstorageData">
      <el-form-item label="出库时间">
        <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="outstorageData.date"></el-date-picker>
      </el-form-item>
      <el-form-item label="所属项目">
        <el-input v-model="outstorageData.projectName" readonly @focus="projectDialog=true"></el-input>
      </el-form-item>
      <el-form-item label="出库名称">
        <el-input v-model="outstorageData.outstorageName"></el-input>
      </el-form-item>
      <el-form-item label="填报人">
        <el-input v-model="outstorageData.applyer" readonly></el-input>
      </el-form-item>
      <el-form-item label="领用人">
        <el-input v-model="outstorageData.getUser"></el-input>
      </el-form-item>
      <el-form-item label="领用班组">
        <el-input v-model="outstorageData.getOrgId"></el-input>
      </el-form-item>
      <el-form-item label="出库人">
        <el-input v-model="outstorageData.outstorageId"></el-input>
      </el-form-item>
      <el-form-item label="出库原因">
        <el-input type="textarea" style="width:800px" v-model="outstorageData.outstorageReason"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" style="width:800px" v-model="outstorageData.comment"></el-input>
      </el-form-item>
    </el-form>

    <el-form>
      <el-button @click="addrow()" v-if="rownum<11">增行</el-button>
      <el-button @click="decreaserow()" v-if="rownum>1">删行</el-button>
      <el-row style="text-align:center">
        <el-col :span="4"><div class="borderDiv">材料名称</div></el-col>
        <el-col :span="4"><div class="borderDiv">规格型号</div></el-col>
        <el-col :span="4"><div class="borderDiv">出库仓库</div></el-col>
        <el-col :span="4"><div class="borderDiv">单价</div></el-col>
        <el-col :span="4"><div class="borderDiv">数量</div></el-col>
        <el-col :span="4"><div class="borderDiv">小计</div></el-col>
      </el-row>
      <el-row v-for="index of rownum" :key="index">
        <el-col :span="4"><div class="borderDiv"><el-input readonly @focus="materialDialog=true;selectedBatchRow=index-1" v-model="batchData[index-1].materialName">
        </el-input></div></el-col>
        <el-col :span="4"><div class="borderDiv"><el-input readonly
        @focus="materialDialog=true;selectedBatchRow=index-1" v-model="batchData[index-1].unitModel">
        </el-input></div></el-col>
        <el-col :span="4"><div class="borderDiv"><el-input 
        v-model="batchData[index-1].warehouseId">
        </el-input></div></el-col>
        <el-col :span="4"><div class="borderDiv">
          <el-input v-model="batchData[index-1].price"></el-input>
          </div></el-col>
        <el-col :span="4"><div class="borderDiv"><el-input v-model="batchData[index-1].outstorageCount"></el-input></div></el-col>
        <el-col :span="4"><div class="borderDiv"><el-input v-model="batchData[index-1].sumAmount"></el-input></div></el-col>
      </el-row>
    </el-form>


    <el-dialog :visible.sync="projectDialog" width="80%">
      <ProjectInfoList @row="getProjectRow"></ProjectInfoList>
    </el-dialog>
    <el-dialog :visible.sync="materialDialog" width="80%">
      <MaterialList @row="getMaterialRow"></MaterialList>
    </el-dialog>
  </div>
</template>
<script>
import ProjectInfoList from "../common/projectInfo/ProjectInfoList"
import MaterialList from "../common/material/MaterialList"
import MaterialOutstorageModel from "../../model/lyz/MaterialOutstorageModel"
const MOM=MaterialOutstorageModel.getInstance();
export default{
  components:{
    ProjectInfoList,
    MaterialList
  },
  data(){
    return{
      outstorageData:{},//入库数据
      batchData:[{}],//细节数据
      projectDialog:false,//显示项目的对话框
      materialDialog:false,//材料对话框
      rownum:1,//添加材料需求的行数
      selectedBatchRow:0,//选中的批量添加行
    }
  },
  created(){
    this.outstorageData.applyer=sessionStorage.getItem("realName");
  },
  methods:{
    saveInstorage(){
      MOM.saveOutstorage(this.outstorageData,this.batchData);
    },
    getProjectRow(row){
      this.projectDialog=false;
      this.outstorageData.pId=row.id;
      this.outstorageData.projectName=row.projectName;
    },
    getMaterialRow(row){
      this.batchData[this.selectedBatchRow].materialName=row.materialName;
      this.batchData[this.selectedBatchRow].mateTypeId=row.id;
      this.batchData[this.selectedBatchRow].unitModel=row.unitModel;
      this.batchData[this.selectedBatchRow].unit=row.unit;
      this.materialDialog=false;
    },
    addrow(){//添加一行
      this.batchData.push({});
      this.rownum++;      
    },
    decreaserow(){//减少一行
      this.batchData.pop();
      this.rownum--;
    }, 
  }
}
</script>